<template>
    <div class="body">
        <!-- <div v-show="!list.length" class="no-review">暂无用户评价~</div> -->
       <div class="review-item" v-for="(item,key) of list" :key="key"  v-show="item.is_show">
           <div class="user-info">
               <div class="user-img">
                   <img :src="item.user.portrait" alt="">
               </div>
               <div class="user-name">
                   <mt-cell :title="item.user.username">{{timestampToTime(item.create_time)}}</mt-cell>
                    <Star class="star" :score="item.mark?item.mark.score:'10'"></Star>
               </div>
           </div>
           <p class="review-text">{{item.status == 7?'系统默认好评':item.comment?item.comment:'用户默认好评'}}</p>
           <div class="order_product">
               <p  v-for="(i,k) of item.order_detail" :key="k">{{i.goods_name}}</p>
           </div>
       </div>
       <p class="no-more"><span>没有更多评论啦</span></p>
    </div>
</template>
<script>
import {shopeva} from '../api'
import Star from '../components/star'
import { timestampToTime } from '../time'
export default {
    name:"review",
    data() {
        return {
            list:[]
        }
    },
    created(){
        this.Shopeva();
    },
    components:{
        Star
    },
    methods:{
        Shopeva(){
            const data = {
                token:this.$store.getters.token,
                store_id:this.$route.query.id
            }
            shopeva(data).then(res=>{
                console.log(res.data)
                this.list = res.data
            })
        }
    }
}
</script>
<style scoped>
    .body{
        height:calc(100vh - 14rem);
        overflow: auto;
    }
    .review-item{
        width: 90%;
        margin: auto;
        padding: 1rem 0;
        border-bottom: 1px solid #EDEDED;
    }
    .user-info .user-img{
        width: 12%;
        display: inline-block;
    }
    .user-info img{
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
    }
    .user-info .user-name{
        width: 86%;
        display: inline-block;
        /* display: flex; */
    }
    .star{
        font-size: 0.6rem;
    }
    .order_product{
        display: flex;
        font-size: 0.6rem;
    }
    .order_product p{
        border:0.05rem solid #999;
        border-radius: 8px;
        padding: 0.2rem;
        margin: 0 0.3rem;
    }
    .no-review{
        text-align: center;
        line-height: 5rem;
        font-weight: bolder;
    }
    .review-text{
        font-size: 1rem;
        line-height: 4rem;
    }
    .mint-cell-text{
        font-size: 1rem;
    }
    .body >>> .mint-cell-wrapper {
    font-size: 1rem;
    line-height: 2rem;
    }
    .no-more span{
        display: block;      /*设置为块级元素会独占一行形成上下居中的效果*/
        position: relative;  /*定位横线（当横线的父元素）*/

        color: #9b9b9b;      /*居中文字的颜色*/
        text-align: center; 
        font-size: 0.8rem;
        line-height: 5rem;
    }
    .no-more span:before, .no-more span:after { 
    content: ''; 
    position: absolute;   /*定位背景横线的位置*/
    top: 50%; 
    background: #EDEDED;   /*背景横线颜色*/
    width: 30%;            /*单侧横线的长度*/
    height: 0.1rem; 
    } 
    .no-more span:before { 
    left: 5%;              /*调整背景横线的左右距离*/
    } 

    .no-more span:after { 
        right: 5%; 
    }
</style>